<html>
<head> 
	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
    <script src="https://cdn.bootcss.com/require.js/2.3.6/require.min.js"></script>
    <title>热电偶温度计算</title> 

<script>
	const UNIVERSAL_GAS_CONSTANT = 8.314; // 理想气体常数，单位：J/(mol·K)

	// 气体的摩尔质量，单位：kg/mol
	const MOLAR_MASS = {
		'air': {'name': '空气', 'molar': 0.0289644, },
		'N2': {'name': '氮气', 'molar': 14.0067 * 2 / 1000, },
		'O2': {'name': '氧气', 'molar': 15.9994 * 2 / 1000, },
		'He': {'name': '氦气', 'molar': 4.002602 * 2 / 1000, },
		'H2': {'name': '氢气', 'molar': 1.00794 * 2 / 1000, },
		'Ar': {'name': '氩气', 'molar': 39.948 * 2 / 1000, },
		'CO': {'name': '一氧化碳', 'molar': 28.0101 * 2 / 1000, },
		'CO2': {'name': '二氧化碳', 'molar': 44.0095 * 2 / 1000, },

		'H2S': {'name': '硫化氢', 'molar': 34.076 * 2 / 1000, },
		'NH3': {'name': '氨气', 'molar': 17.031 * 2 / 1000, },
		'CH4': {'name': '甲烷', 'molar': 16.043 * 2 / 1000, },
		'C2H6': {'name': '乙烷', 'molar': 30.07 * 2 / 1000, },
		'C3H8': {'name': '丙烷', 'molar': 44.0956 * 2 / 1000, },
		'C4H10': {'name': '丁烷', 'molar': 58.122 * 2 / 1000, },
		'C2H4': {'name': '乙烯', 'molar': 28.054 * 2 / 1000, },
		'C2H2': {'name': '乙炔', 'molar': 26.037 * 2 / 1000, },
		'C3H6': {'name': '丙烯', 'molar': 42.0797 * 2 / 1000, },
		'C4H8': {'name': '丁烯', 'molar': 56.1 * 2 / 1000, },
	}

	// 计算密度
	function calcDensity(){
		// 获取气体类型
		var gas = $('[name="gas"]:checked').val();
		$('#controlGas label').removeClass('ui-btn-active');
		$('#' + gas).siblings().addClass('ui-btn-active')
		console.log('gas', $('#' + gas))

		// 自定义气体，输入密度
		if (gas == 'custom') {
			document.getElementById("custom_density1").style.display="";
		}
		else {
			document.getElementById("custom_density1").style.display="none";
		}

		var temperature = document.getElementById('temperature').value;
		var pressure = document.getElementById('pressure').value;
		var density = document.getElementById('custom_density').value;

		var message = ''

		if (temperature == '' || pressure == '' || (gas == 'custom' && density == '')) {
			if (gas == 'custom') {
				message += '请输入温度、压力与工况密度！'
			}
			else {
				message += '请输入温度与压力！'
			}
		}
		else {
			try {
				// 将温度转换为开氏温标
				const kelvinTemperature = Number(temperature) + 273.15;

				// MPa转换为Pa
				const paPressure = Number(pressure) * 1000000;

				// 标况温度和压力
				const kelvinTemperature0 = Number(0) + 273.15;
				const paPressure0 = Number(0.101325) * 1000000;

				if (gas != 'custom') {
					// 计算工况密度
					density = (paPressure * MOLAR_MASS[gas]['molar']) / (UNIVERSAL_GAS_CONSTANT * kelvinTemperature);
					message += "介质：" + MOLAR_MASS[gas]['name'] + "<br>工况密度：" + density.toFixed(3) + " kg/m³ <br>"
				}
					// 计算标况密度 
					const density0 = paPressure0 * kelvinTemperature * Number(density) / kelvinTemperature0 / paPressure;
					message += " 标况密度：" + density0.toFixed(3) + " kg/m³ <br>"
			}
			catch(err){
				message = err
			}
		}

		document.getElementById('message').innerHTML = message
	}

	function inputGas(){
		var html = '';
		for(var p in MOLAR_MASS) {
			html += '<div class="ui-radio ui-mini"><label class="ui-btn ui-corner-all ui-btn-inherit ui-radio-off" for="'+ p +'">'+ MOLAR_MASS[p]['name'] +'</label><input type="radio" name="gas" id="'+ p +'" onchange="calcDensity()" value="'+ p +'" ></div>'
		}
		html += '<div class="ui-radio ui-mini"><label class="ui-btn ui-corner-all ui-btn-inherit ui-radio-off" for="custom">自定义</label><input type="radio" name="gas" id="custom" onchange="calcDensity()" value="custom" ></div>'
		$('#controlGas').html(html);
		$('#controlGas input:radio:first').click();
	};

	window.onload = function() {
		inputGas();
	    document.getElementById("message").innerHTML = '';
	};

</script>

<style>
.ui-input{
  float:left;
  width: 100px; 
}
.ui-input>div{
    display: inline-block;
    line-height: 26px;
    height: 26px;
}

.ui-lable{
   float:left;
   line-height:36px; 
   width: 80px; 
}

.ui-lable.ui-lable-left{
   line-height:36px;	
}

.ui-controlgroup-controls .ui-btn.ui-corner-all{
	border-right-width: 1px;
	margin-left: -1px;
}

</style>

</head>
<body>
    <div data-role="page" id="pageone">
		<div data-role="header" data-position="fixed">
			<h1 id="header-device-detail">物质密度计算</h1>
			<a href="javascript:document.location='./flow.html'" class="ui-btn ui-btn-right ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-back"></a>
		</div>

		<div data-role="main" class="ui-content">
		
		<form action="">
			<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
				<legend><b>气体类型</b>：</legend>
				<div id="controlGas"></div>
			</fieldset>
			<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
				<legend><b>标况类型</b>：</legend>
				<label for="c0_pa101325">0℃/0.101325MPa</label>
				<input type="radio" name="standard" id="c0_pa101325" onchange="calcDensity()" value="c0_pa101325" checked>
			</fieldset>

			<li data-role="fieldcontain">
				<div class="ui-grid-a">
					<div class="ui-lable ui-lable-left">
					    <label><b>温度</b></label>
				    </div>
					<div class="ui-input">
					    <input type="text" name="temperature" id="temperature" data-mini="true" onchange="calcDensity()">
					</div>
					<div class="ui-lable">
					    <label >℃</label>
				    </div>
				</div>
				<div class="ui-grid-a">
					<div class="ui-lable ui-lable-left">
					    <label><b>绝对压力</b></label>
				    </div>
					<div class="ui-input">
					    <input type="text" name="pressure" id="pressure" data-mini="true" onchange="calcDensity()">
					</div>
					<div class="ui-lable">
					    <label >MPa</label>
				    </div>
				</div>
				<div class="ui-grid-a" id="custom_density1" style="display: none;">
					<div class="ui-lable ui-lable-left">
					    <label><b>工况密度</b></label>
				    </div>
					<div class="ui-input">
					    <input type="text" name="custom_density" id="custom_density" data-mini="true" onchange="calcDensity()">
					</div>
					<div class="ui-lable">
					    <label>kg/m³</label>
				    </div>
				</div>
			</li>
		</form>
		<li data-role="fieldcontain">
			<div id="message">
			</div>
		</li>
	    </div>
	</div>
</body>
</html>